<template>
    <div class="box_changePwd" style="height: 100%; width: 100%">
            <el-form
              ref="changePwdForm"
              :model="changePwdForm"
              :rules="changePwdRules"
              label-postion="left"
              class="changePwdForm">
                <el-form-item
                  label="旧密码"
                  class="item1"
                  label-width=50%
                  prop="oldPwd"
                >

                  <el-input
                    v-model="changePwdForm.oldPwd"
                    autocomplete="on"
                    prefix-icon="el-icon-user"
                    placeholder="请输入旧密码"
                    name="oldPwd"
                    tabindex="1"
                    show-password
                  >
                  </el-input>
                </el-form-item>

                <el-form-item
                  label="新密码"
                  class="item2"
                  label-width=50%
                  prop="newPwd"
                >
                  <el-input
                    v-model="changePwdForm.newPwd"
                    autocomplete="on"
                    prefix-icon="el-icon-user"
                    placeholder="请输入新密码"
                    name="newPwd"
                    tabindex="2"
                    show-password
                  >
                  </el-input>
                </el-form-item>

                <el-form-item 
                  label="重复新密码"
                  class="item3" 
                  label-width=50% 
                  prop="newPwd2"
                >
                  <el-input
                  v-model="changePwdForm.newPwd2"
                  prefix-icon="el-icon-user"
                  autocomplete="on"
                  name="newPwd2"
                  tabindex="3" 
                  placeholder="请再次确认密码"
                  show-password
                  >
                  </el-input>
                </el-form-item>
            <div class="bnt_cancel_decide">
              <el-button  
                style="width: 120px; margin-top: 30px"
                type="info"
                @click="back_to_home"
              >
                返回
              </el-button>
              <el-button 
                type="primary" 
                style="width: 120px; margin-left: 150px"
                @click.native.prevent="handleChangePwd"
              >
                确定
              </el-button>
            </div>
            </el-form>

                
    </div>
</template>

<script>
import {
  userChangePwd
} from '@/api/Info/getInfo';
export default {
  name: "changePwd",
  data() {
    var checkOldPwd = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入旧密码'));
      } else {
        callback();
      }
    }
    var checkPassword = (rule, value, callback) => {
    if (!value) {
        callback(new Error('请输入密码'));
    } else {
      if (value.length < 8 || value.length > 16) {
          callback(new Error('密码长度必须为8到16位'));
      } else {
          var test1 = /[0-9]/g;
          var test2 = /[a-zA-Z]/g;
          var test3 = /[0-9A-Za-z]$/g;
          if(!test1.test(value)) {
              callback(new Error('密码必须包含数字'));
          } else if (!test2.test(value)) {
              callback(new Error('密码必须包含字母'));
          } else if (!test3.test(value)) {
              callback(new Error('密码只能由数字和字母组成'));
          } else {
              callback();
          }
        }
      }
    };
    var checkSame = (rule, value, callback) => {
      if (!value) {
          callback('请再次确认密码');
      } else {
          if (value !== this.changePwdForm.newPwd) {
              callback(new Error('两次密码不一致'));
          } else {
              callback();
          }
      }
    };
    return {
      changePwdForm: {
        oldPwd: "",
        newPwd: "",
        newPwd2: ""
      },
      changePwdRules: {
        oldPwd: [{required: true, trigger: 'blur', validator: checkOldPwd}],
        newPwd: [{required: true, trigger: 'blur', validator: checkPassword}],
        newPwd2: [{required: true, trigger: 'blur', validator: checkSame}]
      },
      loading: false
    }
  },
    methods: {
      back_to_home () {
        this.$router.push('/Home')
      },
      handleChangePwd () {
        this.$refs.changePwdForm.validate(valid => {
          if (valid) {
            this.loading = true;
            const input = {};
            input.oldPwd = this.changePwdForm.oldPwd;
            input.newPwd = this.changePwdForm.newPwd;
            userChangePwd(input).then(() => {
              this.loading = false;
              this.$message.success('修改密码成功');
              this.$store.commit('commonUser/clearData');
              this.$store.commit('userInfo/clearData');
              this.$router.push('/login')
            })
          } else {
            console.log('error changePwd');
            return false;
          }
        });
      }
    }
}
</script>

<style lang="scss">
.box_changePwd {
    text-align: center;
    font-size: bold 14px;
    
}

.changePwdForm {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    transform: translate(-75%, -80%);
}

.bnt_cancel_decide {
  position: relative;
  left: 25%;
}


</style>